2.5 Web Application Architectures

Prerequisites
- How client-side programs and server-side programs work together as an web application with a database

Motivations
- Let's consider this situation in the application TRUQA (TRU Question and Answer): You need to handle 'SignIn', 'Join', and 'ForgotPassword'. You can develop three different PHP programs for the three software modules. But they are very similar modules. Isn't it better to develop just one PHP program and handle all the three software modules together within the program?
- Then what kind of application/software architecture do you need to use?

Model View Control (MVC) basic

Read all in Basic MVC Architecture.
- List the three components.
Read the first paragraph and 'Overview' in Model-view-controller.
What is the controller responsible for?
In TRUQA, we have three different types of user inputs - 'SignIn', 'Join', and 'ForgotPassword'. A few more different types will be added later. The question is how to distinguish the three types of user inputs in the controller.

Any good idea?

Any good idea to send data without displaying to the user or obtaining from the user?
There is one input type for this purpose. What is it? 'hidden'

Here is an important example.

-- in view_start.html ----------------------------
<form action='controller.php'>
    <input type='hidden' name='page' value='Start'> <br>
    <input type='???' name='command' value='SignIn'> <br>
    Username: <br> <input type='text' name='Username'> <br>
    Password:<br> <input type='???' name='Password'> <br>
    <input type='submit'>
</form>
-- in view_start.html ----------------------------
<form action='controller.php'>
    <input type='???' name='page' value='Start'> <br>
    <input type='???' name='command' value='ForgotPassword'> <br>
    Username: <br> <input ???='???' ???='Username'> <br>
    <input type='submit'>
</form>
-- in controller.php ----------------------------
<?php
    $command = $_GET['command'];  // It is in the code, but hidden from the user.
    switch($command) {
        case 'SignIn':
            ...
            exit();  // or break when there is something more to do after switch
        case 'Join':
            ...
            exit();
        case 'ForgotPassword':
            ...
            exit();
        default:
            ...
            exit();
    }
?>

Single Page Application (SPA) basic
- Whenever you click a link or you enter data, a new page comes from the server. Is it convenient?
- Is there anyway to make web applications more like desktop applications?
- In other words, can we move the control logic to the client-side? The server-side will become more like a library that is used to access databases.
- Read 'Introduction' and 'Technical approaches' in Single-page application.

How are MVC and SPA different?
- In MVC, commands (user data) are sent to server-side scripts that access data base, prepare web content, and send it back to the client.
- In SPA, commands (user data) are processed in client-side scripts that send some requests to server-side scripts to get information from a database. The client-side scripts update web content with the information obtained from the server.

Learning outcomes
- Understand what MVC is.
- Understand what SPA is.
- Explain briefly how MVC and SPA are different.